<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/jquery-kq-roll-img.css">
    <script src="./js/jquery-3.4.1.min.js"></script>
</head>

<body>
    <div id="roll-img">
        <ul>
            <li><img src="./images/img1.jpg" /></li>
            <li><img src="./images/img2.jpg" /></li>
            <li><img src="./images/img3.jpg" /></li>
            <li><img src="./images/img4.jpg" /></li>
            <li><img src="./images/img5.jpg" /></li>
        </ul>
        <ol>

        </ol>
        <a href="javascript:;" id="goPrev">&laquo;</a>
        <a href="javascript:;" id="goNext">&raquo;</a>
    </div>


    <script>
        const $div1 = $('#roll-img'),
            $ul = $div1.children('ul'),
            $imgs = $ul.children();

        const len = $imgs.length,
            width = $imgs.eq(0).outerWidth();

        var index = 0,
            lastIndex = 0,
            isMove = false; // ul的运动状态，默认静止

        // 在ul后面追加第0张图
        // $imgs.eq(0).clone().appendTo($ul)
        // // 给ul计算宽度
        // $ul.width((len + 1) * width)
        $ul.append($imgs.eq(0).clone()).width((len + 1) * width)

        // 创建按钮
        for (var i = 0; i < len; i++) {
            $('<li>').html(i + 1).addClass(i === 0 ? 'active' : '').appendTo('#roll-img ol')
        }

        // 按钮点击切换
        const $btns = $('#roll-img ol li')
        $btns.on('click', function() {
            if (isMove) return;
            isMove = true
                // 现任变前任
            lastIndex = index
                // 找一个新的现任
            index = $(this).index()
                // 根据index修改class以及图片运动
            $btns.eq(lastIndex).removeClass('active')
            $btns.eq(index).addClass('active')
            $ul.animate({
                left: -index * width
            }, 1000, function() {
                isMove = false
            })
        })

        // 向右切换
        $('#goNext').on('click', function() {
            if (isMove) return;
            // 只要代码执行到这里意味着要马上开始运动了
            isMove = true
            lastIndex = index
            index++
            if (index === len) {
                index = 0
                    // 先移动到追加那张图（下标为len）
                $ul.stop().animate({
                    left: -len * width
                }, 1000, function() {
                    // 这次运动结束了，让ul瞬间回到0的位置
                    $ul.css('left', 0)
                        // $ul.css({'left': 0})
                    isMove = false
                })
            } else {
                $ul.stop().animate({
                    left: -index * width
                }, 1000, function() {
                    isMove = false
                })
            }
            // 不管有没有超出边界，都按照index修改按钮的active就行了
            $btns.eq(lastIndex).removeClass('active')
            $btns.eq(index).addClass('active')
        })

        // 向左切换
        $('#goPrev').on('click', function() {
            if (isMove) return;
            isMove = true
            lastIndex = index
            index--
            if (index < 0) {
                // 超出边界
                index = len - 1
                    // 先把ul瞬间拉到len的位置（追加那张图）,在网len-1（index）移动
                $ul.css('left', -len * width).animate({
                    left: -index * width
                }, 1000, function() {
                    isMove = false
                })
            } else {
                // 正常情况
                $ul.animate({
                    left: -index * width
                }, 1000, function() {
                    isMove = false
                })
            }
            $btns.eq(lastIndex).removeClass('active')
            $btns.eq(index).addClass('active')
        })



        // auto是一个立即执行函数，执行完成以后return了auto本身，返回值就会作为mouseleave的事件处理函数
        $div1.hover(() => {
            clearInterval($div1.timer)
        }, (function auto() {
            $div1.timer = setInterval(() => {
                $('#goNext').trigger('click')
            }, 3000)
            return auto
        })())
    </script>
</body>

</html>